<template>
    <div class="search-header" v-if="show">
        <span class="iconfont icon-back" @click="back()">&#xe611;</span>
        <slot></slot>
        <span class="iconfont header-search-icon" @click="gosearch()">&#xe651;</span>
    </div>
</template>
<script>
export default {
    name: "SearchHeader",
    data() {
        return {
            show:1
        }
    },
    methods:{
        back() {
            this.$router.go(-1);
        },
        gosearch() {
            this.$router.push('/search');
        }
    }
}
</script>
<style lang="stylus" scoped>

.search-header
    position fixed;
    top:0;
    left:0;
    width:100%;
    height:48.3px;
    line-height 48.3px;
    display:flex;
    justify-content:space-between;
    align-items center;
    background #f2f2f2;
    color rgb(102, 102, 102);
    font-size 18px;
    z-index 2
    .search-input
        display:inline-block;
        flex 1;
        height 36px;
        border 1Px solid #e5e5e5;
        text-indent 1em;
    .iconfont
        color #aaa;
        font-size:32px;
        width:48.3px;
        height:100%;
        display:inline-block;
    .icon-back
        transform rotate(-90deg)
</style>